<template>
  <div class="preview-panel h-full flex flex-col bg-gray-50">
    <!-- 主预览区域 -->
    <div class="flex-1 bg-white border border-gray-200 rounded-lg m-4">
      <!-- 预览头部信息 -->
      <div class="p-6 border-b border-gray-200">
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center">
            <!-- 预览图标 -->
            <div class="w-12 h-12 rounded-full bg-green-500 text-white flex items-center justify-center text-xl font-bold mr-4">
              <el-icon><iEpView /></el-icon>
            </div>
            <div>
              <h2 class="text-xl font-semibold text-gray-800 mb-1">页面预览</h2>
              <p class="text-sm text-gray-500">实时预览页面内容和执行状态</p>
            </div>
          </div>
          
          <!-- 预览控制选项 -->
          <div class="flex items-center space-x-4">
            <div class="flex items-center">
              <span class="text-sm text-gray-500 mr-2">预览模式:</span>
              <el-select v-model="previewMode" size="default" class="w-32">
                <el-option label="实时预览" value="realtime" />
                <el-option label="静态预览" value="static" />
                <el-option label="模拟预览" value="simulate" />
              </el-select>
            </div>
            
            <div class="flex items-center space-x-2">
              <el-button type="primary" size="default" @click="refreshPreview">
                <el-icon class="mr-1"><iEpRefresh /></el-icon>
                刷新预览
              </el-button>
              <el-button type="success" size="default" @click="captureScreenshot">
                <el-icon class="mr-1"><iEpCamera /></el-icon>
                截图
              </el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 预览内容区域 -->
      <div class="flex h-full">
        <!-- 左侧控制面板 -->
        <div class="w-80 border-r border-gray-200 bg-gray-50 flex flex-col">
          <!-- 步骤同步预览 -->
          <div class="p-4 border-b border-gray-200">
            <div class="flex items-center justify-between mb-3">
              <h3 class="text-sm font-semibold text-gray-700">步骤同步预览</h3>
              <el-icon class="text-gray-400 cursor-pointer" @click="toggleStepPreview">
                <iEpArrowDown v-if="!stepPreviewExpanded" />
                <iEpArrowUp v-else />
              </el-icon>
            </div>
            
            <div v-if="stepPreviewExpanded" class="space-y-3">
              <div class="flex items-center justify-between">
                <span class="text-sm text-gray-600">状态:</span>
                <el-tag type="success" size="small">已完成</el-tag>
              </div>
              <div class="text-sm text-gray-500">请点击左侧步骤</div>
              <div class="flex items-center justify-between">
                <span class="text-sm text-gray-600">步骤进度:</span>
                <span class="text-sm font-semibold text-blue-600">{{ currentStepIndex }}/{{ totalSteps }}</span>
              </div>
              
              <div class="flex items-center space-x-2">
                <el-button size="small" @click="previousStep" :disabled="currentStepIndex <= 0">
                  <el-icon><iEpArrowLeft /></el-icon>
                </el-button>
                <el-button size="small" @click="nextStep" :disabled="currentStepIndex >= totalSteps - 1">
                  <el-icon><iEpArrowRight /></el-icon>
                </el-button>
                <el-button type="primary" size="small" @click="syncStep">
                  <el-icon class="mr-1"><iEpRefresh /></el-icon>
                  同步
                </el-button>
              </div>
            </div>
          </div>

          <!-- 步骤参数 -->
          <div class="p-4 border-b border-gray-200">
            <h3 class="text-sm font-semibold text-gray-700 mb-3">步骤参数</h3>
            <div class="space-y-3">
              <div>
                <label class="text-xs text-gray-500 mb-1 block">超时时间</label>
                <div class="flex items-center">
                  <el-input-number
                    v-model="stepTimeout"
                    :min="1000"
                    :step="1000"
                    size="small"
                    class="flex-1"
                  />
                  <span class="text-xs text-gray-500 ml-2">ms</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 执行状态 -->
          <div class="p-4 border-b border-gray-200">
            <h3 class="text-sm font-semibold text-gray-700 mb-3">执行状态</h3>
            <div class="space-y-2">
              <div v-for="(status, index) in executionStatuses" :key="index" class="flex items-center">
                <div 
                  class="w-2 h-2 rounded-full mr-3"
                  :class="getStatusColor(status.type)"
                ></div>
                <span class="text-sm text-gray-600">{{ status.text }}</span>
              </div>
            </div>
          </div>

          <!-- 页面信息 -->
          <div class="p-4 border-b border-gray-200">
            <h3 class="text-sm font-semibold text-gray-700 mb-3">页面信息</h3>
            <div class="space-y-2">
              <div>
                <span class="text-xs text-gray-500">当前URL:</span>
                <div class="text-sm text-blue-600 truncate">{{ currentUrl }}</div>
              </div>
              <div>
                <span class="text-xs text-gray-500">页面标题:</span>
                <div class="text-sm text-gray-800">{{ pageTitle }}</div>
              </div>
              <div>
                <span class="text-xs text-gray-500">页面类型:</span>
                <el-tag type="info" size="small" class="mt-1">{{ pageType }}</el-tag>
              </div>
              <div>
                <span class="text-xs text-gray-500">预期操作:</span>
                <div class="text-sm text-gray-600 mt-1">{{ expectedAction }}</div>
              </div>
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="p-4 space-y-2">
            <div class="grid grid-cols-2 gap-2">
              <el-button type="warning" size="small" @click="highlightElement">
                <el-icon class="mr-1"><iEpView /></el-icon>
                高亮元素
              </el-button>
              <el-button type="success" size="small" @click="executeStep">
                <el-icon class="mr-1"><iEpVideoPlay /></el-icon>
                执行步骤
              </el-button>
            </div>
            <div class="grid grid-cols-2 gap-2">
              <el-button type="primary" size="small" @click="captureUrl">
                <el-icon class="mr-1"><iEpLink /></el-icon>
                捕获URL
              </el-button>
              <el-button size="small" @click="openNewWindow">
                <el-icon class="mr-1"><iEpPlus /></el-icon>
                新窗口
              </el-button>
            </div>
          </div>
        </div>

        <!-- 右侧预览区域 -->
        <div class="flex-1 flex flex-col">
          <!-- 浏览器工具栏 -->
          <div class="p-4 border-b border-gray-200 bg-gray-50">
            <div class="flex items-center space-x-2">
              <div class="flex-1 flex items-center bg-white rounded-lg border border-gray-300 px-3 py-2">
                <el-icon class="text-gray-400 mr-2"><iEpSearch /></el-icon>
                <input 
                  v-model="previewUrl" 
                  class="flex-1 bg-transparent border-none outline-none text-sm"
                  placeholder="https://example.com"
                />
              </div>
              <el-button size="small" @click="goBack">
                <el-icon><iEpArrowLeft /></el-icon>
              </el-button>
              <el-button size="small" @click="goForward">
                <el-icon><iEpArrowRight /></el-icon>
              </el-button>
              <el-button size="small" @click="refreshPage">
                <el-icon><iEpRefresh /></el-icon>
              </el-button>
              <el-button size="small" @click="toggleSimulation">
                <el-icon class="mr-1"><iEpDocument /></el-icon>
                模拟
              </el-button>
              <el-button size="small" @click="toggleFullscreen">
                <el-icon><iEpFullScreen /></el-icon>
              </el-button>
              <div v-if="stepExecuted" class="flex items-center text-green-600">
                <el-icon class="mr-1"><iEpCheck /></el-icon>
                <span class="text-sm">步骤执行成功</span>
              </div>
            </div>
          </div>

          <!-- 预览内容 -->
          <div class="flex-1 p-4 bg-white">
            <div v-if="!hasPreviewContent" class="h-full flex flex-col items-center justify-center text-center">
              <div class="w-24 h-24 mx-auto mb-4 bg-blue-100 rounded-full flex items-center justify-center">
                <el-icon class="text-4xl text-blue-400"><iEpView /></el-icon>
              </div>
              <h3 class="text-lg font-semibold text-gray-800 mb-2">预览区域</h3>
              <p class="text-sm text-gray-500 mb-1">点击左侧步骤查看对应页面预览</p>
              <p class="text-xs text-gray-400">支持实时URL同步和页面模拟</p>
            </div>
            
            <div v-else class="h-full bg-gray-100 rounded-lg border border-gray-200 flex items-center justify-center">
              <div class="text-center">
                <div class="w-16 h-16 mx-auto mb-3 bg-gray-200 rounded-lg flex items-center justify-center">
                  <el-icon class="text-2xl text-gray-400"><iEpMonitor /></el-icon>
                </div>
                <p class="text-sm text-gray-600">页面预览内容</p>
                <p class="text-xs text-gray-400 mt-1">{{ previewUrl }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useScriptStore } from '../stores/script'
import { useExecutionStore } from '../stores/execution'
import { 
  View as iEpView,
  Refresh as iEpRefresh,
  Camera as iEpCamera,
  ArrowDown as iEpArrowDown,
  ArrowUp as iEpArrowUp,
  ArrowLeft as iEpArrowLeft,
  ArrowRight as iEpArrowRight,
  VideoPlay as iEpVideoPlay,
  Link as iEpLink,
  Plus as iEpPlus,
  Search as iEpSearch,
  Document as iEpDocument,
  FullScreen as iEpFullScreen,
  Check as iEpCheck,
  Monitor as iEpMonitor
} from '@element-plus/icons-vue'

const scriptStore = useScriptStore()
const executionStore = useExecutionStore()

// 响应式数据
const previewMode = ref('realtime')
const stepPreviewExpanded = ref(true)
const stepTimeout = ref(5000)
const currentStepIndex = ref(0)
const previewUrl = ref('https://example.com')
const stepExecuted = ref(false)
const hasPreviewContent = ref(false)

// 模拟数据
const executionStatuses = ref([
  { type: 'success', text: '元素定位成功' },
  { type: 'success', text: '文本输入完成' },
  { type: 'warning', text: '等待页面响应...' }
])

const currentUrl = ref('https://example.com/login')
const pageTitle = ref('登录页面 - 示例网站')
const pageType = ref('登录页面')
const expectedAction = ref('在用户名输入框中输入文本')

// 计算属性
const totalSteps = computed(() => scriptStore.stepCount)

// 方法
const toggleStepPreview = () => {
  stepPreviewExpanded.value = !stepPreviewExpanded.value
}

const previousStep = () => {
  if (currentStepIndex.value > 0) {
    currentStepIndex.value--
  }
}

const nextStep = () => {
  if (currentStepIndex.value < totalSteps.value - 1) {
    currentStepIndex.value++
  }
}

const syncStep = () => {
  // 同步步骤逻辑
  console.log('同步步骤')
}

const refreshPreview = () => {
  // 刷新预览逻辑
  console.log('刷新预览')
}

const captureScreenshot = () => {
  // 截图逻辑
  console.log('截图')
}

const getStatusColor = (type) => {
  const colors = {
    success: 'bg-green-500',
    warning: 'bg-yellow-500',
    error: 'bg-red-500',
    info: 'bg-blue-500'
  }
  return colors[type] || 'bg-gray-500'
}

const highlightElement = () => {
  // 高亮元素逻辑
  console.log('高亮元素')
}

const executeStep = () => {
  // 执行步骤逻辑
  stepExecuted.value = true
  setTimeout(() => {
    stepExecuted.value = false
  }, 3000)
}

const captureUrl = () => {
  // 捕获URL逻辑
  console.log('捕获URL')
}

const openNewWindow = () => {
  // 打开新窗口逻辑
  console.log('打开新窗口')
}

const goBack = () => {
  // 后退逻辑
  console.log('后退')
}

const goForward = () => {
  // 前进逻辑
  console.log('前进')
}

const refreshPage = () => {
  // 刷新页面逻辑
  console.log('刷新页面')
}

const toggleSimulation = () => {
  // 切换模拟模式逻辑
  console.log('切换模拟模式')
}

const toggleFullscreen = () => {
  // 切换全屏逻辑
  console.log('切换全屏')
}
</script>

<style scoped>
.preview-panel {
  font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 按钮样式增强 */
:deep(.el-button) {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
}

:deep(.el-button:hover) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 输入框样式 */
:deep(.el-input-number) {
  width: 100%;
}

:deep(.el-input-number .el-input__wrapper) {
  border-radius: 6px;
}

/* 标签样式 */
:deep(.el-tag) {
  border-radius: 6px;
  font-weight: 500;
}

/* 选择器样式 */
:deep(.el-select) {
  width: 100%;
}

:deep(.el-select .el-input__wrapper) {
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .preview-panel .flex.h-full {
    flex-direction: column;
  }
  
  .preview-panel .w-80 {
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
  }
}
</style>
